<template>
	<div class='toc_IM_component_frame'>
		<div class='toc_IM_header'>
			<span style='display: inline-block;position: absolute; left: 10px;' @click="close">
				<img v-bind:src="imgConfig.back" style='width: 16px;'>
			</span>
			聊天信息
		</div>
		<transition name="slide-fade">
			<component v-bind:is="currentComponent.instance" :components-data='currentComponent.componentsData' @emit-components='emitComponents'>
			</component>
		</transition>
		<div class=' toc_IM_memsList'>
			<ul>
				<li class='memsListItem' v-for="item in memList">
					<img class='avata' v-bind:src='imgConfig.d_user' v-if="item.avatar==''">
					<img class='avata' v-bind:src='item.avatar' v-if="item.avatar!=''" @click="viewer(item.avatar)">
					<span>{{item.name}}</span>
				</li>
				<li class='memsListItem' @click="openComponent('choosePerson')">
					<img class='avata' v-bind:src='imgConfig.group'>
					<span>修改成员</span>
				</li>
			</ul>
		</div>
		
		<div class='toc_list'>群聊名称<span>{{chatInfo.title}}</span></div>
		<div class='toc_list divider'>群描述<span>{{chatInfo.desc}}</span></div>
		<div class='toc_list'>我的文件</div>
		<div class='toc_list'>我的收藏</div>
		
	</div>
	
</template>

<script>
	import imgConfig from '@/assets/scripts/imgConfig.js'
	import choosePerson from '@/components/choosePerson.vue'
	import viewer from '@/components/viewer.vue'
	export default {
	  	name: 'memsList',
	  	props: ['componentsData'],
	  	components:{choosePerson,viewer},
	  	data(){
		    return {
		    	imgConfig:imgConfig,
		    	memList:[],
		    	chatInfo:{},
		    	currentComponent: {
					instance: null,
					componentsData: null,
					emitData: null
				},
		    }
		},
		mounted(){
			this.chatInfo= this.componentsData;
			this.createMemList()
		},
		methods:{
			createMemList(){
				Object.keys(this.componentsData.memMap).forEach(item=>{
					this.memList.push(this.componentsData.memMap[item])
				});
			},
			close(){
	  			this.$emit('emit-components',null);
		  	},
		  	openComponent(cname, data) {
				if (cname == 'choosePerson') {
					this.currentComponent.instance = choosePerson;
					this.currentComponent.componentsData = {
						headerTitle:'修改成员',
						selected:this.memList,
						allowAdd:true,
						allowDel:true
					};
				} else if(cname == 'viewer') {
					this.currentComponent.instance = viewer;
					this.currentComponent.componentsData = data;
				};
			},
			viewer(path){
				this.openComponent('viewer',{
					filesList:[{path:path}],
					allowSend:false,
				});
			},
			upDateMemList(data){
				console.log(data)
			},
			emitComponents(data) {
				if(data!=null){data.functionName.call(this)};
				this.currentComponent.instance = null;
				this.currentComponent.componentsData = null;
			},
		}
	}
</script>

<style>
	div.toc_IM_memsList{
		background: #fff;
		box-sizing: border-box;
		padding: 5px 0;
		float: left;
		border-bottom: 1px solid #ededed;
		margin-bottom: 10px;
		width: 100%;
	}
	div.toc_IM_memsList ul{
		
	}
	li.memsListItem{
		width: 20%;
		height:70px;
		float: left;
		text-align: center;
		margin: 7px 0;
	}
	li.memsListItem img{
		width: 50px;
		height: 50px;
		border-radius: 5px;	
	}
	li.memsListItem span{
		width: 100%;
		float: left;
		font-size: 12px;
		text-align: center;
		
	}
</style>